Essential CSS Snippets
Code snippets are a thing of beauty. They are quite simply a reusable block of code that you can drop into your own code wherever and whenever you need it. These tidbits of code are often shared among programmers, and web designers, in order to help one another save time when it comes to solving common problems.
HTML5 and CSS books on Amazon
- HTML and CSS: Visual QuickStart Guide
- Programming in HTML5 with JavaScript and CSS3
- CSS Cookbook
- CSS in Easy Step
For example, if you want to give your site-rounded corners a simple search for, "rounded corners css snippet" would yield an ample amount of results. Check the comments out for each one to make sure that there are no glaring issues that other users have pointed out and select one that you like. After finding the snippet that you like best you simply copy and paste it into your current stylesheet. Things like colors and the radius can easily be modified, but you don't have to build it from scratch. Best of all, the code has been tested and most likely works right out of the box for you.
But not all code snippets are designed to add flair to your site. Some add a bit more functionality or they make things work better. That's what this short collection of code snippets is meant to provide. Each of these essential snippets are here to help fix or prevent issues that may occur on your site.
Clearfix
When using floating elements on a webpage the surrounding elements don't always behave as they are meant to. Sometimes an element will sit outside of its parent element and force its way up to an adjacent float instead of sitting underneath it making the page look broken. A clearfix hack is meant to fix that. By "clearing" the floating elements it forces an element to move itself down past the float.
This snippet below can be added to your stylesheet to address these problems:
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Media queries
Whether it's for SEO reasons or to make your site more user friendly for your visitors mobile devices cannot be ignored when coding your pages. Instead of opting for a mobile version of the site, many designers choose to utilize responsive web design to give visitors the same experience they would get on a desktop on a phone or tablet as well.
Media queries allow a webpage's content to adapt to a variety of screen resolutions and as such have become an essential part of a website's foundation.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
CSS Resets
Anyone who has been designing pages for any amount of time knows all too well the nightmare of getting things to work across multiple browsers. One browser reads the CSS this way, another sees it differently and some ignore the code altogether.
A CSS reset sets up a consistent base that will work across all browsers. With this in place the designer can go ahead and re-style the site to give it all the pretty elements without concern because if the browser has trouble with a bit of css code, it can revert to the reset such as the one below. Just be sure to modify it so it works with your site and not the default code that is used for demonstration purposes.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baselinebaseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
Any of these snippets can help you save time, and headache, while building your site. Be on the lookout for part two of this article where we delve into some styling snippets that can give your site a bit more pop.
Related Posts:
About the author
Copyright © . All Rights Reserved